import React, { Fragment, useEffect } from 'react';
import { Link , withRouter } from 'react-router-dom'
//路由
import Router from '../../router/index'
import "../../views/index/components/aside.scss";
import { Menu } from 'antd';
import {
    UserOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;




//无子集菜单处理
const renderMenu = (data) => {
    return <Menu.Item key={data.key}><Link to={data.key}> <span>{data.title}</span> </Link></Menu.Item>
}

//子集菜单处理
const renderSubMenu = ({ title, key, children }) => {
    return (
        <SubMenu key={key} icon={<UserOutlined />} title={title}>
            {
                children && children.map(item => {
                    return item.children && item.children.length > 0 ? renderSubMenu(item) : renderMenu(item)
                })
            }
        </SubMenu>
    )
}

function Aside(props) {
    console.log(props)
    return (
        <Fragment>
            <h1 className="logo"><span>LOGO</span></h1>
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                {
                    Router && Router.map(firstItem => {
                        return firstItem.children && firstItem.children.length > 0 ? renderSubMenu(firstItem) : renderMenu(firstItem);
                    })
                }
            </Menu>
        </Fragment>
    )
}

export default withRouter(Aside);